<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宿舍生活</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        /* 导航栏样式 */
        nav {
            background-color: #0099ff;
            color: white;
            padding: 10px 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        nav a {
            color: white;
            text-decoration: none;
            margin-right: 20px;
            transition: color 0.3s ease;
        }

        nav a:hover {
            color: #ffcc00;
        }

        /* 宿舍生活页面样式 */
        #life {
            padding: 20px;
            background-color: white;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            margin: 20px;
        }

        #life h1 {
            border-bottom: 2px solid #0099ff;
            padding-bottom: 10px;
            color: #333;
        }

        .life-section {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 20px;
        }

        .card {
            background-color: #f4f4f4;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            flex: 1 1 calc(33.333% - 20px);
            min-width: 250px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: scale(1.02);
        }

        .card.expanded {
            background-color: #e0f7fa;
        }

        .card h3 {
            color: #0099ff;
        }

        .card img {
            width: 100%;
            height: auto;
            margin-bottom: 10px;
            border-radius: 5px;
        }

        .card p {
            margin-bottom: 10px;
        }

        .card a {
            color: #007BFF;
            text-decoration: none;
            transition: text-decoration 0.3s ease;
        }

        .card a:hover {
            text-decoration: underline;
        }

        .life-check {
            text-align: center;
            margin-bottom: 20px;
        }

        .life-check img {
            width: 100%;
            max-width: 250px;
            height: auto;
            margin-bottom: 10px;
            border-radius: 5px;
        }

        .life-check button {
            background-color: #0099ff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .life-check button:disabled {
            background-color: #999;
            cursor: not-allowed;
        }

        .interaction {
            text-align: center;
        }

        .interaction a {
            color: #007BFF;
            text-decoration: none;
            margin: 0 10px;
            transition: text-decoration 0.3s ease;
        }

        .interaction a:hover {
            text-decoration: underline;
        }
    </style>

</head>

<body onload="handleAudioLoad()">
    <header>
        <div class="logo">
            <img src="img/宿舍logo.jpg" alt="宿舍 Logo">
            <h1>5525</h1>
            <h3>一个青春活力的家</h3>
        </div>
        <!-- 导航栏 -->
        <nav>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li>
                    <a href="%E5%AE%BF%E8%88%8D%E6%88%90%E5%91%98.html">宿舍成员</a>
                    <ul class="dropdown">
                        <li><a href="#">成员组成</a></li>
                        <li><a href="#">值日表</a></li>
                    </ul>
                </li>
                <li>
                    <a href="%E5%AE%BF%E8%88%8D%E7%94%9F%E6%B4%BB.html">宿舍生活</a>
                    <ul class="dropdown">
                        <li><a href="#">每日小知识</a></li>
                        <li><a href="#">宿舍公约</a></li>
                        <li><a href="#">生活小贴士</a></li>
                        <li><a href="#">互动板块</a></li>
                    </ul>
                </li>
                <li>
                    <a href="%E5%AE%BF%E8%88%8D%E6%95%85%E4%BA%8B.html">宿舍故事</a>
                    <ul class="dropdown">
                        <li><a href="#">宿舍心愿墙</a></li>
                        <li><a href="#">难忘时刻</a></li>
                        <li><a href="#">宿舍未来</a></li>
                    </ul>
                </li>
                <li>
                    <a href="%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC.html">关于我们</a>
                    <ul class="dropdown">
                        <li><a href="#">活动投票</a></li>
                        <li><a href="#">留言板</a></li>
                        <li><a href="#">课程表</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
        <div class="search-box">
            <input type="text" placeholder="搜索">
            <button><i class="fas fa-search"></i></button>
        </div>
    </header>
<!-- 合照 -->
<div class="group-photo">
    <img src="img/合照.jpg" alt="合照">
</div>

    <!-- 宿舍生活页面 -->
    <div class="daily-knowledge">
        <h3>每日小知识</h3>
        <div id="knowledge-content">
            <!-- 小知识内容将在这里动态显示 -->
        </div>
    </div>

    <section id="convention">
        <h2>宿舍公约</h2>
        <div class="life-section">
            <div class="card">
                <h3>作息时间</h3>
                <p>晚上12点半后保持安静，确保大家的休息质量。</p>
            </div>
            <div class="card">
                <h3>卫生值日</h3>
                <p>轮流打扫，每周一次，保持宿舍环境整洁。</p>
            </div>
            <div class="card">
                <h3>用电安全</h3>
                <p>禁止私拉乱接电线，人走断电，确保安全。</p>
            </div>
            <div class="card">
                <h3>公共物品</h3>
                <p>共同爱护宿舍公共物品，损坏需及时报修。</p>
            </div>
        </div>
    </section>
    <section id="tips">
        <h2>生活小贴士</h2>
        <div class="life-section">
            <div class="card">
                <h3>节能小贴士</h3>
                <p>如何节约水电、合理使用电器。</p>
            </div>
            <div class="card">
                <h3>健康生活</h3>
                <p>分享简单的健身方法、健康饮食建议。</p>
            </div>
            <div class="card">
                <h3>心理调适</h3>
                <p>提供一些缓解压力、放松心情的小技巧。</p>
            </div>
        </div>
    </section>
    <section id="interaction">
        <h2>互动板块</h2>
        <div class="life-section">
            <div class="card">
                <h3>分享你的故事</h3>
                <p>在这里分享你的宿舍生活趣事、感动瞬间或成长经历。</p>
                <a href="#">上传你的故事</a>
            </div>
            <div class="card">
                <h3>查看他人分享</h3>
                <p>浏览其他宿舍成员的故事，感受宿舍的温暖与活力。</p>
                <a href="#">查看故事</a>
            </div>
        </div>
    </section>
    <section id="life">
        <div class="life-check">
            <img src="img/生活打卡.jpg" alt="生活打卡">
            <p>今日生活打卡</p>
            <!-- 打卡和每日小知识并排放置 -->
            <div class="check-in-knowledge-container">
                <div class="check-in-section">
                    <button id="check-in-button" onclick="handleCheckIn()">打卡</button>
                </div>

            </div>
        </div>
        <div class="interaction">
            <a href="#">查看打卡记录</a>
            <a href="#">分享你的宿舍生活</a>
        </div>
    </section>
    <footer class="footer">
        <ul class="footer-menu">
            <li><a href="index.html">首页</a></li>
            <li>
                <a href="%E5%AE%BF%E8%88%8D%E6%88%90%E5%91%98.html">宿舍成员</a>
                <ul class="dropdown">
                    <li><a href="#">成员组成</a></li>
                    <li><a href="#">值日表</a></li>
                </ul>
            </li>
            <li>
                <a href="%E5%AE%BF%E8%88%8D%E7%94%9F%E6%B4%BB.html">宿舍生活</a>
                <ul class="dropdown">
                    <li><a href="#">每日小知识</a></li>
                    <li><a href="#">宿舍公约</a></li>
                    <li><a href="#">生活小贴士</a></li>
                    <li><a href="#">互动板块</a></li>
                </ul>
            </li>
            <li>
                <a href="%E5%AE%BF%E8%88%8D%E6%95%85%E4%BA%8B.html">宿舍故事</a>
                <ul class="dropdown">
                    <li><a href="#">宿舍心愿墙</a></li>
                    <li><a href="#">难忘时刻</a></li>
                    <li><a href="#">宿舍未来</a></li>
                </ul>
            </li>
            <li>
                <a href="%E5%85%B3%E4%BA%8E%E6%88%91%E4%BB%AC.html">关于我们</a>
                <ul class="dropdown">
                    <li><a href="#">活动投票</a></li>
                    <li><a href="#">留言板</a></li>
                    <li><a href="#">课程表</a></li>
                </ul>
            </li>
        </ul>
        <div class="footer-contact">
            <p>宿舍: 5525宿舍</p>
            <p>联系方式: dorm@example.com</p>
            <p>电话: 123-456-7890</p>
        </div>
        <div class="footer-copyright">
            <p>Copyright&copy;2025 5525宿舍版权所有</p>
        </div>
    </footer>
    <script>
        function handleCheckIn() {
            const button = document.querySelector('.life-check button');
            button.disabled = true;
            button.textContent = '已打卡';
            button.style.backgroundColor = '#999';
            alert('打卡成功！继续保持美好的宿舍生活哦！');
        }
        // 定义一个包含小知识的数组
        const knowledgeList = [
            "每天喝足够的水可以帮助保持身体的水分平衡，促进新陈代谢。",
            "细嚼慢咽有助于消化，减轻肠胃负担。",
            "睡前喝牛奶有助于睡眠，因为牛奶中含有色氨酸，可以转化为褪黑素。",
            "空腹吃香蕉可能导致血液中镁含量骤升，对心血管系统产生不良影响。",
            "每天走6000-10000步有助于保持身体活力，促进新陈代谢。",
            "用微波炉加热食物时，建议使用微波炉专用容器，避免使用塑料容器。",
            "每天晒太阳15-30分钟可以促进维生素D的合成，有助于钙的吸收。",
            "定期清理电脑桌面和文件夹，可以提高工作效率。",
            "适量吃坚果可以补充健康的脂肪和蛋白质，但要注意不要过量。",
            "每天保持微笑可以改善心情，减轻压力。"
        ];

        // 获取小知识容器
        const knowledgeContainer = document.getElementById("knowledge-content");

        // 随机选择一个小知识并显示
        function displayRandomKnowledge() {
            const randomIndex = Math.floor(Math.random() * knowledgeList.length);
            const selectedKnowledge = knowledgeList[randomIndex];
            knowledgeContainer.textContent = selectedKnowledge;
        }

        // 页面加载时显示一个小知识
        window.onload = displayRandomKnowledge;
    </script>
</body>

</html>